<!doctype html>

<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-132775238-1');
  </script>
  <script data-ad-client="ca-pub-3841792756480152" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
  <meta name="keywords" content="RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, async-api, Web Component, web-hooks, OpenAPI, REST, themes, dark mode, markdown, API documentation">

  <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap" rel="stylesheet">

  <!-- Code Highlight -->
  <link rel="stylesheet" href="./prismjs/prism.css">
  <script src="./prismjs/prism.js"></script>
  
  <link rel="stylesheet" href="./index.css">
  <link rel="stylesheet" href="table.css">

  <title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
  <style>
    .m-table {
      width:100%;
    }
    .main-content {
      max-width: 730px; 
      margin-left: auto; 
      margin-right: auto;
      color: #304455;
      font-size: 16px;
    }
    .container {
      border:1px solid #aaa;
      border-radius: 4px;
      padding:2px;
      margin:12px;
      display:flex;
      flex-direction: column;
      align-items: center;
      box-shadow: 0 1px 2.94px 0.06px rgba(4,26,55,0.16);
    }
  </style>
</head>

<body>
  <div style="background-color: white; font-family: exo;font-weight: lighter; font-size:large; display:flex; flex-direction: row; align-items: center;justify-content: space-between">
    <div style="padding:15px 20px 15px 20px; ">
      Get a Stripe like API experience for your customers in minutes - documentation, rate-limiting and API-key auth with <a style="font-weight:bold; color:#FF00BD" href="https://zuplo.link/rapidoc-1">zuplo</a>
    </div>
    <div style="padding:2px 20px 2px 20px; ">
      <a class="zuplo-button" href="https://zuplo.link/rapidoc-1">Start free</a>
    </div>
  </div>

  <div class="banner" style="max-height:400px; overflow:hidden;">
    <div class="topbar">
      <div class="header">
        <a class="menu-item" data-action="url" href="./index.html">
          <img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
        </a>
        <div class="product-name">RapiDoc</div>
        <div class="menu" style="flex:1"></div>
        <nav class="menu" onclick="goToSection(event)">
          <a class="menu-item" data-action="url" href="./index.html"> Home </a>
          <a class="menu-item" data-action="url" href="./quickstart.html"> Quick Start </a>
          <a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
          <a class="menu-item" data-action="url" href="./api.html"> API </a>
          <a class="menu-item hide-in-mobile" data-action="url" href="https://github.com/rapi-doc/RapiDoc"> GitHub </a>
        </nav>
      </div>
    </div>
  </div>

  <div class="main-content" id="theme" style="display: flex; flex-direction: column; align-items: flex-start;">
    <a id="att"></a>
    <h1> Theming with RapiDoc</h1>
    <span>
      <p>
        If you’ve worked with themes in a web application, you know how difficult it can be.
        RapiDoc is used in many corporates for API documentation, and every organization has its style guide to follow.
      </p>
      <p>
        Apart from aligning to an organizational style guide, theming can also be helpful to layout information based on the target audience. 
        That is to say, API documentation for a regular API developer can be very differently laid out than for an end-user. 
        In one case the regular API user may be more interested in APIs request and response schema, 
        whereas a new user would be looking for detailed descriptions usage examples code snippets, etc.
      </p>
    </span>

    <h2>Theming options</h2>
    <span>
      <p> 
        When you insert <span class="mono bold"> &lt;rapi-doc&gt;</span> element in an HTML, 
        It is important to note that none of the existing style or css declarations will affect RapiDoc 
        as this is a native web-component and they inherently provide style encapsulation
      </p>
      <p>
        Well, this may be good for <span class="mono bold"> &lt;rapi-doc&gt;</span> as its styles won't get accidentally messed up, 
        but it also makes it harder to change the styles of internal elements. 
        However, listed below are some of the options which you may use to achieve your desired styling
        <ul>
          <li> RapiDoc attributes</li>
          <li> CSS Parts</li>
          <li> Inject custom HTML, CSS and JS using <span class="mono bold blue"> &lt;slot&gt; </span></li>
          <li> Inject HTML using markdown</li>
          <li> CSS vars</li>
        </ul>
      </p>
    </span>

    In This section will be focusing on CSS Parts 

    <h2>CSS Parts</h2>
    <p>
      While most of the styling needs can be taken care of by attributes, 
      but if a very specific need is there to target and style a particular section in the document 
      then RapiDoc provides many CSS parts that can be used to style them
    </p>
    <p>
      For instance, you can change the background and text color of the side navigation bar, 
      but what if, when you need to apply a mix of multiple colors with a gradient? 
      To achieve this you can use CSS to target specific sections of RapiDoc using <span class="mono bold">::part</span> selector
    </p>
    <div style="width:100%; display:flex; justify-content: center;">
      <img class="shadow2" style="width:500px;margin: 16px" src="./examples-theme/rapidoc-csspart-nav.png" />
    </div>
    <span>
      Below code snippet uses <span class="mono bold blue"> rapi-doc::part(nav-bar)</span> 
      selector to target the navigation bar and renders a gardient navigation bar | &nbsp;
      <a href="./examples-theme/cssparts-nav1.html" target="_blank"> 
        Demo</a>
    </span>
    <pre class="shadow1 code-block" style="width:730px">
      <code class="language-html">
        &lt;html&gt;
        ...        
          &lt;style&gt;
            rapi-doc::part(section-navbar) { /* <<< targets navigation bar */
              background: linear-gradient(90deg, #3d4e70, #2e3746);
            }
          &lt;/style&gt;

          &lt;rapi-doc spec-url = "https://petstore.swagger.io/v2/swagger.json"
            theme = "dark" 
            primary-color = "#f54c47"
            bg-color = "#2e3746"
            text-color = "#bacdee"
            show-header = "false"
          &gt; &lt;/rapi-doc&gt;
        ...
        &lt;/html&gt;
      </code>
    </pre>
    <p>
      Likewise, there are many <span class="mono bold">::part</span> selectors you can use that RapiDoc exposes for styling. 
      Let's take another example and this time we would highlight the Servers section by giving it an alternate background color as shown below
      <div style="width:100%; display:flex; justify-content: center;">
        <img class="shadow2" style="width:500px;margin: 16px; border:1px solid #423368" src="./examples-theme/rapidoc-csspart-server.png" />
      </div>
      <span>
        And the code to achieve it is shown below
        | <a href="./examples-theme/cssparts-servers.html" target="_blank"> Demo</a>
      </span>
      <pre class="shadow1 code-block" style="width:730px">
        <code class="language-html">
          &lt;html&gt;
            ...
            &lt;style&gt;
              rapi-doc::part(section-servers) { /* <<< targets the server div */
                background: #6b5b95;
                color:#d1c2e4;
                margin:0 24px 0 24px;
                border-radius: 5px;
              }
              rapi-doc::part(label-selected-server) { /* <<< targets selected server label */
                color: #fff;
              }  
            &lt;/style&gt;
            &lt;rapi-doc  spec-url = "https://petstore.swagger.io/v2/swagger.json" 
              show-header = "false"
              nav-bg-color = "#423368"
              primary-color ="#df75c4"
              bg-color = "#fae4f5"    
            &gt; &lt;/rapi-doc&gt;
            ...
          &lt;/html&gt;
        </code>
      </pre>
    </p>

    <p>
      <span>
        Another Example to change the button styles
        | <a href="./examples-theme/cssparts-btn.html" target="_blank"> Demo</a>
      </span>
      <pre class="shadow1 code-block" style="width:730px">
        <code class="language-html">
          &lt;html&gt;
            ...
            &lt;style&gt;
              rapi-doc::part(btn){ border-radius: 15px; }
              rapi-doc::part(btn-try) { 
                background-color: yellow;
                color: #333;
                border-color: yellow;
              }
              rapi-doc::part(btn-selected-response-status) {
                background-color: yellow;
                color: #333;
                border-color: yellow;
              }
            &lt;/style&gt;
            &lt;rapi-doc  spec-url = "https://petstore.swagger.io/v2/swagger.json" 
              show-header = "false"
              nav-bg-color = "#423368"
              primary-color ="#df75c4"
              bg-color = "#fae4f5"    
            &gt; &lt;/rapi-doc&gt;
            ...
          &lt;/html&gt;
        </code>
      </pre>

    </p>
    <p>
      Following are the list of <span class="mono bold blue">css ::part</span> provided by rapidoc. The names of these parts should be self explenatory
      <table class="m-table">
        <tr> <td class="blue" style="border:none">Sections</td></tr>
        <tr>
          <td class="mono">
            section-navbar, section-navbar-search section-navbar-item, section-navbar-active-item, section-header section-main-content, section-logo, section-overview, label-overview-title, 
            section-auth, section-auth-scopes, section-servers, section-tag, section-operations-in-tag, section-operation
          </td>
        </tr>

        <tr> <td class="blue" style="border:none">Containers/ Wrappers</td></tr>
        <tr>
          <td class="mono">
            wrap-request-btn
          </td>
        </tr>


        <tr><td class="blue" style="border:none">Labels</td></tr>
        <tr>
          <td class="mono">
            label-header-title, label-overview-title, label-selected-server, label-tag-title, 
            label-operations-method, label-operation-path
          </td>
        </tr>

        <tr> <td class="blue" style="border:none">Buttons</td></tr>
        <tr>
          <td class="mono">
            btn, btn-fill, btn-outline, btn-search, btn-try, btn-fill, btn-clear, btn-copy, btn-clear-resp, 
          </td>
        </tr>

        <tr> <td class="blue" style="border:none">Checkboxes/ Toggles</td></tr>
        <tr>
          <td class="mono">
            checkbox checkbox-auth-scope
          </td>
        </tr>

        <tr> <td class="blue" style="border:none">Inputs</td></tr>
        <tr>
          <td class="mono">
            textbox, textbox-param, textarea, textarea-param, file-input
          </td>
        </tr>

        <tr><td class="blue" style="border:none">Anchors</td></tr>
        <tr>
          <td class="mono">
            anchor, anchor-overview, anchor-param-example
          </td>
        </tr>
      </table>
    </p>

    <h2>CSS Variables</h2>
    <p>
      RapiDoc uses many CSS variables style its content. These CSS variables can be changed directly in HTML 
    </p>
  </div>
</body>

</html>
